<template>
    <div class="user_info">
        <el-icon size="20" color="gray">
            <Edit />
        </el-icon>
        欢迎：{{ customer.firstName +"."+customer.lastName}}
        <el-button type="danger" plain @click="logout">退出登录</el-button>

    </div>
    <div class="container">
        <div class="menu">
            <el-menu>
                <el-menu-item index="1">
                    <el-icon><location /></el-icon>
                    <span><router-link to="/publishers">显示供货商</router-link></span>
                </el-menu-item>
                <el-menu-item index="2">
                    <el-icon>
                        <Connection />
                    </el-icon>
                    <router-link to="/books">显示全部的图书</router-link>
                </el-menu-item>
                <el-menu-item index="3">
                    <el-icon>
                        <Connection />
                    </el-icon>
                    <router-link to="/orders">显示全部的订单</router-link>
                </el-menu-item>
                <el-menu-item index="4">
                    <el-icon>
                        <Connection />
                    </el-icon>
                    <router-link to="/authors">显示全部的作者</router-link>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="content">
            <router-view></router-view>
        </div>
    </div>

</template>
<script setup>
import { ref, onMounted } from "vue"
import { useRouter } from 'vue-router'
import axios from '../axios'

const router = useRouter()
const customer = ref({})
onMounted(() => {
    let customerInfo = localStorage.getItem('customer')
    if (customerInfo) {
        customer.value = JSON.parse(customerInfo)
    }
    else {
        // alert("无用户登录信息！！！")
    }
});
async function  logout() {
    const resp=await axios.get("/logout")
    if(resp.status==200){
        localStorage.removeItem('customer')
        router.push({ name: 'login' })
    }
}


</script>
<style scoped>
.user_info {
    text-align: right;
}

.container {
    display: flex;
}
</style>